<template>
    <div id="float-side">
        <el-popover placement="left" trigger="hover">
            <p style="font-size: 16px;color: #2E3033;">联系热线：{{ common.contact_tel  }}</p>
            <span slot="reference">
                <i class="el-icon-phone-outline"></i>
            </span>
        </el-popover>
        <span @click="showFeedbackModal">
            意见反馈
        </span>
        <span @click="scrollToTop" id="backToTopButton">
            <i class="el-icon-arrow-up"></i>
        </span>
    </div>
</template>

<script>
/**
 * 右侧悬浮组件
 */
import { mapGetters } from 'vuex'
export default {
    name: 'floatSide',
    data () {
        return {

        }
    },
    computed: {
        ...mapGetters(['common']),
    },
    methods: {
        handleScroll () {
            // 当页面滚动到一定高度时显示返回顶部按钮
            const showButton = window.scrollY > 100 // 例如，滚动超过100px
            const backToTopButton = document.getElementById('backToTopButton')
            backToTopButton.style.display = showButton ? 'block' : 'none'
        },
        scrollToTop () {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },
        showFeedbackModal () {
            this.$store.dispatch('showFeedbackModal', true)
        }
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    },
    beforeDestroy () {
        // 移除事件监听
        window.removeEventListener('scroll', this.handleScroll)
    }
}
</script>

<style lang="less" scoped>
#float-side {
    position: fixed;
    right: 50%;
    bottom: 290px;
    margin-right: -766px;
    z-index: 1100;
    width: 58px;

    span {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 50px;
        height: 50px;
        font-size: 17px;
        color: #909399;
        border: 1px dashed #707070;
        background-color: rgba(46, 48, 51, .02);
        cursor: pointer;
        transition: all .3s ease;

        &:not(:last-child) {
            margin-bottom: 15px;
        }

        i {
            font-size: 40px;
        }

        &:hover {
            background-color: #EF312A;
            color: #fff;
        }
    }
}
</style>